/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-07 15:18:18
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-12 21:02:15
 * @FilePath: \utils_react_manager\app\src\views\Learn\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Popover, Space, Table, Button, message, Progress,Form, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { SOURCE_OPTIONS } from '@/contants';
import { LEARN_COUNT } from './contants';
import { wordCount } from '@/api/word';
import learnState from '@/store/Learn';

import './index.less';

const Learn: React.FC = () => {
  // 获取仓库数据
  const { learnList } = useSelector((state: RootState) => ({
    ...state.learn
  }));

  // 修改仓库数据
  const dispatch = useDispatch();

  // 搜索
  const handleFinish = useCallback(
    (values: IWordListPayload) => {
      dispatch(
        (dis: Function) => learnState?.mutations?.getLearnList(dis, values)
      );
    },
    []
  ); 

  // 熟悉单词 陌生单词
  const handleWordCount = useCallback(
    async (values: IWordListItem, type: string) => {
      try {
        const { id, count } = values;
        const c_t =  type === 'familiar' ? count + 1 : count - 1;
        const { success, msg } = await wordCount({
          id,
          type,
          count: c_t,
          updateTime: new Date().getTime()
        });
        success ? message.success(msg) : message.warning(msg);
      } catch (error: any) {
        message.error(error);
      }
    },
    []
  );

  // 表格
  const columns: ColumnsType<IWordListItem> = useMemo(
    () => {
      return [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          align: 'center'
        },
        {
          title: '英文',
          key: 'name',
          align: 'center',
          render: record => {
            const { count, name } = record;

            return (
              <div className='learn-word-name'>
                <div className={`learn-word-type-${ count ? 'white' : 'red' }`}>{ count ? '复' : '新' }</div>
                <div className='learn-word-label'>{ name }</div>
              </div>
            )
          }
        },
        {
          title: '音标',
          dataIndex: 'voice',
          key: 'voice',
          align: 'center'
        },
        {
          title: '描述',
          dataIndex: 'explain',
          key: 'explain',
          align: 'center',
          render: record => {

            return (
              <Popover content={record}>
                <div className='overflow-text'>{ record }</div>
              </Popover>
            );
          }
        },
        {
          title: '熟悉程度',
          dataIndex: 'count',
          key: 'count',
          align: 'center',
          render: record => {
            const percent = record * 10;
            return (
              <Progress width={50} type="circle" percent={percent} />
            );
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: record => {
            const { count } = record;
            
            return (
              <Space size="middle">
                <Button onClick={() => handleWordCount(record, 'familiar')}>熟悉</Button>
                <Button disabled={!count} onClick={() => handleWordCount(record, 'strange')}>陌生</Button>
              </Space>
            );
          },
        },
      ];
    },
    []
  );

  return (
    <div className='learn-page-container'>
      <div className="learn-header-container">
        <div className="word-filter-option">
          <Form
            onFinish={handleFinish}
            autoComplete="off"
          >
            <Form.Item
              label="数据来源"
              name="source"
            >
              <Select allowClear placeholder="请选择数据来源" options={SOURCE_OPTIONS} />
            </Form.Item>

            <Form.Item
              label="条数"
              name="count"
            >
              <Select allowClear placeholder="请选择数据条数" options={LEARN_COUNT} />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                测试
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div className="word-opear-option"></div>
      </div>
      <div className="learn-list-container">
        <Table
          bordered
          rowKey="id"
          columns={columns}
          dataSource={learnList}
          pagination={false}
        />
      </div>
    </div>
  )
};


export default Learn;
